import { memo, useState } from 'react';

import gsap from 'gsap';

import ReactFullpage from '@fullpage/react-fullpage';

import './hoem.less';

const fullPage = memo(() => {
  const slides = [1, 2, 3, 4, 5, 6];

  const [tl] = useState(() =>
    gsap.timeline({
      paused: true,
      duration: 1,
    })
  );
  return (
    <>
      <ReactFullpage
        afterLoad={(origin, destination, direction) => {
          console.log('afterLoad event', {
            origin,
            destination,
            direction,
          });
          tl.progress(0.6);
        }}
        credits={{
          enabled: true,
          label: 'Made with fullPage.js',
          position: 'right',
        }}
        render={({ state, fullpageApi }) => {
          console.log(state, fullpageApi);

          return (
            <ReactFullpage.Wrapper>
              {slides.map((slide, i) => {
                let color;

                switch (i) {
                  case 1:
                    color = 'blue';
                    break;
                  case 3:
                    color = 'gree';
                    break;
                  case 2:
                    color = 'red';
                    break;
                  default:
                    color = 'orange';
                    break;
                }
                return (
                  <div key={slide} className="section">
                    <section className={`panel red ${color}`}>
                      <p>This is page {i}</p>
                    </section>
                  </div>
                );
              })}
            </ReactFullpage.Wrapper>
          );
        }}
      />
    </>
  );
});

export default fullPage;
